
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>遮罩 - UIkit 中文文档</title>
        <meta name="description" content="通过为图片创建拥有不同样式的遮罩层来实现更好的展示效果。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit遮罩,overlay,UIkit图片,UIkit鼠标悬停显示,uikit缩略图">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li class="uk-active"><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">遮罩/Overlay</h1>

                            <p class="uk-article-lead">创建拥有不同样式的图片遮罩效果。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>这个组件使用方法很简单。创建一个定位遮罩层的语境，需要为包含图片的容器元素添加 <code>.uk-overlay</code> 类。为一个子元素添加 <code>.uk-overlay-panel</code> 类创建真实的遮罩面板。通常你需要使用 <code>&lt;figure</code> 和 <code>&lt;figcaption&gt;</code> 元素。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay">
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                    <figcaption class="uk-overlay-panel">
                                        <h3>Title</h3>
                                        <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    </figcaption>
                                </figure>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-on-hover-active"><a href="#overlay-on-hover-active" class="uk-link-reset">通过hover拨动遮罩效果</a></h2>

                            <p>默认情况下，遮罩层是可见的。添加 <code>.uk-overlay-hover</code> 类到遮罩层的容器，实现遮罩层的隐藏和hover拨动效果。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay uk-overlay-hover">
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                    <figcaption class="uk-overlay-panel uk-overlay-fade">
                                        <h3>Title</h3>
                                        <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    </figcaption>
                                </figure>
                            </div>

<pre><code>&lt;figure class="uk-overlay uk-overlay-hover"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <h3>active状态拨动遮罩/Toggle on active</h3>

                            <p>想要在遮罩层的父容器处于actvie状态时拨动遮罩层，添加 <code>.uk-overlay-active</code> 类即可。这会在诸如用在<a href="slideshow.html">幻灯片</a>等情况下带来很多方便。</p>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-background"><a href="#overlay-background" class="uk-link-reset">遮罩背景</a></h2>

                            <p>为遮罩层的容器添加 <code>.uk-overlay-background</code> 类，就能赋予遮罩层背景效果。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay">
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                    <figcaption class="uk-overlay-panel uk-overlay-background">
                                        <h3>Title</h3>
                                        <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    </figcaption>
                                </figure>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-overlay-background"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-icon"><a href="#overlay-icon" class="uk-link-reset">遮罩层的图标</a></h2>

                            <p>基本上可以把任意内容放在遮罩层上面。你也可以添加 <code>.uk-overlay-icon</code> 类到遮罩面板中，将会显示一个图标。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay">
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                    <figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background"></figcaption>
                                </figure>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-overlay-icon"&gt;&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-position"><a href="#overlay-position" class="uk-link-reset">遮罩定位</a></h2>

                            <p>默认地，遮罩层从左上角开始覆盖整个父容器。要想定位和修剪遮罩层，添加以下类中的一个到遮罩面板中即可。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-overlay-top</code></td>
                                            <td>遮罩层顶部对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-bottom</code></td>
                                            <td>遮罩层底部对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-left</code></td>
                                            <td>遮罩层左对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-right</code></td>
                                            <td>遮罩层右对齐</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid" data-uk-grid-margin>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top">
                                            <h3>Overlay Top</h3>
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom">
                                            <h3>Overlay Bottom</h3>
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left">
                                            <h3>Overlay Left</h3>
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right">
                                            <h3>Overlay Right</h3>
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-overlay-top"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-image"><a href="#overlay-image" class="uk-link-reset">图片遮罩</a></h2>

                            <p>要使用图片作为遮罩层，需要为带有 <code>.uk-overlay-panel</code> 的 <code>&lt;img&gt;</code> 元素添加 <code>.uk-overlay-image</code> 类名。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay uk-overlay-hover">
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                    <img class="uk-overlay-panel uk-overlay-image uk-overlay-fade" src="images/placeholder_600x400_2.svg" width="600" height="400" alt="">
                                </figure>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;img class="uk-overlay-panel uk-overlay-image" src="" width="" height="" alt=""&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-transitions"><a href="#overlay-transitions" class="uk-link-reset">遮罩的过渡效果</a></h2>

                            <p>遮罩层面板和图片都可以轻易做成动画效果。只需添加以下类中的一个到遮罩层面板或者 <code>&lt;img&gt;</code> 元素。记住，这玩意只能与 <code>.uk-overlay-hover</code> 或 <code>.uk-overlay-active</code> 组合使用。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-overlay-slide-top</code></td>
                                            <td>添加这个类到遮罩面板，使它由顶部滑出。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-slide-bottom</code></td>
                                            <td>添加这个类到遮罩面板，使它由底部滑出。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-slide-left</code></td>
                                            <td>添加这个类到遮罩面板，使它由左边滑出。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-slide-right</code></td>
                                            <td>添加这个类到遮罩面板，使它由右边滑出。</td>
                                        </tr>
                                                                                <tr>
                                            <td><code>.uk-overlay-fade</code></td>
                                            <td>添加这个类到遮罩面板或图片，使它淡入。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-scale</code></td>
                                            <td>添加这个类到图片使它放大。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-spin</code></td>
                                            <td>添加这个类到图片，使它向右轻轻旋转。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-overlay-grayscale</code></td>
                                            <td>添加这个类到图片，hover时去饱和度并着色。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p><span class="uk-badge">NOTE</span> 如果你想要图片具有动画效果，并希望遮罩面板总是可见的，只需要添加 <code>.uk-ignore</code> 类名到面板。这样，它就能无视 <code>.uk-overlay-hover</code> 的效果了。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid" data-uk-grid-margin>

                                <li class="uk-width-medium-1-3">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background  uk-overlay-bottom uk-overlay-slide-bottom">
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-3">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-scale" src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-ignore">
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-3">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img class="uk-overlay-spin" src="images/placeholder_600x400.svg" width="600" height="400" alt="Image">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
                                            <p>Lorem ipsum dolor sit amet.</p>
                                        </figcaption>
                                    </figure>
                                </li>

                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- This example is sliding in the overlay panel from the top --&gt;
&lt;figure class="uk-overlay uk-overlay-hover"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-overlay-slide-top"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;!-- This example is scaling up the image while the overlay panel always remains visible --&gt;
&lt;figure class="uk-overlay uk-overlay-hover"&gt;
    &lt;img class="uk-overlay-scale" src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-ignore"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;!-- This example is spinning the image and sliding in the overlay panel from the bottom --&gt;
&lt;figure class="uk-overlay uk-overlay-hover"&gt;
    &lt;img class="uk-overlay-spin" src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-overlay-slide-top"&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-flex"><a href="#overlay-flex" class="uk-link-reset">遮罩与 flex</a></h2>

                            <p>你可以使用 <a href="flex.html">Flex 组件</a> 在垂直和水平方向上居中遮罩面板，而无需进行裁剪。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul class="uk-grid" data-uk-grid-margin>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                            <div>
                                                <h3>Title</h3>
                                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                                <button class="uk-button uk-button-primary">Button</button>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </li>

                                <li class="uk-width-medium-1-2">
                                    <figure class="uk-overlay">
                                        <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-flex uk-flex-bottom">
                                            <div>
                                                <h3>Title</h3>
                                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                                <button class="uk-button uk-button-primary">Button</button>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </li>

                            </ul>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- In this example the overlay panel is centered vertically and horizontally -->
&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center"&gt;
        &lt;div&gt;...&lt;/div&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;!-- In this example the overlay panel is aligned to the bottom -->
&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;figcaption class="uk-overlay-panel uk-flex uk-flex-bottom"&gt;
        &lt;div&gt;...&lt;/div&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overlay-anchor"><a href="#overlay-anchor" class="uk-link-reset">遮罩层的锚</a></h2>

                            <p>将整个遮罩层作为链接，只需要将 <code>&lt;a&gt;</code> 元素放入到遮罩层容器，并添加来自<a href="utility.html">效果组件</a> 的 <code>.uk-position-cover</code> 类名。</p>

                            <p><span class="uk-badge uk-badge-danger">重要</span> 应用这个效果时，需要确保已经移除了带有其他容器元素的 <code>&lt;figcaption&gt;</code> ，比如 <code>&lt;div&gt;</code> 。否则标签不能生效。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-width-medium-1-2">
                                <figure class="uk-overlay uk-overlay-hover">
                                    <img src="images/placeholder_600x400.svg" alt="Image">
                                    <div class="uk-overlay-panel uk-overlay-fade uk-overlay-background">
                                        <h3>Anchor</h3>
                                        <p>Lorem ipsum dolor sit amet.</p>
                                    </div>
                                    <a class="uk-position-cover" href="#"></a>
                                </figure>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;figure class="uk-overlay"&gt;
    &lt;img src="" width="" height="" alt=""&gt;
    &lt;div class="uk-overlay-panel"&gt;...&lt;/div&gt;
    &lt;a class="uk-position-cover" href=""&gt;&lt;/a&gt;
&lt;/figure&gt;</code></pre>

                            <p><span class="uk-badge">NOTE</span> 只将遮罩面板作为链接，只需要将锚移至遮罩面板内即可。</p>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>